<template>
	<view>
		<view class="user-info">
			<open-data type="userAvatarUrl" class="avatar"></open-data>
			<open-data type="userNickName"></open-data>
		</view>
		
		<view class="order-list">
			<navigator url="/pages/order_list/index" 
			class="order-item" 
			v-for="(item, index) in order"
			:key="index"
			>
				<view :class="`iconfont ${item.icon}`"></view>
				<text>{{item.label}}</text>	
			</navigator>
		</view>
		
		<NavigatorBar icon="iconkefu" label="联系客服">400-xxx-xxxx</NavigatorBar>
		<navigator url="/pages/feedback/index">
			<NavigatorBar icon="iconnavicon-yjjy" label="意见反馈"></NavigatorBar>
		</navigator>
		<NavigatorBar icon="iconbanben" label="当前版本">v 4.1</NavigatorBar>
	</view>
</template>

<script>
	import NavigatorBar from "../../components/navigatorBar.vue";
	export default {
		data() {
			return {
				// 中间的订单菜单
				order: [
					{ icon: "iconfukuan", label: "待付款" },
					{ icon: "iconshouhuo", label: "待收货" },
					{ icon: "icontuihuo", label: "退货/退款" },
					{ icon: "icondingdanyichenggong", label: "全部订单" },
				]
			}
		},
		components:{
			NavigatorBar
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
.user-info{
	width: 750rpx;
	height: 329rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #eb4450;
	color: #fff;
	
	.avatar{
		width: 172rpx;
		height: 172rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-bottom: 5px;
	}
}

.order-list{
	display: flex;
	justify-content: space-around;
	padding: 20rpx 0;
	border-bottom: 10px #eee solid;
	
	.order-item{
		text-align: center;
		font-size: 12px;
		.iconfont{
			font-size: 24px;
		}
		
		&:active{
			color: red;
		}
	}
}
</style>
